import { useRoutes, useLocation, useNavigate } from "react-router-dom";
import { routes } from "./router";
import { Tabbar } from "react-vant";
import React, { Suspense } from "react";
const RouterView = () => useRoutes(routes);

function App() {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  return (
    <div>
      <Suspense>
        <RouterView></RouterView>
      </Suspense>

      <Tabbar value={pathname} onChange={(name) => navigate(name)}>
        <Tabbar.Item name="/movie">电影</Tabbar.Item>
        <Tabbar.Item name="/cinema">影院</Tabbar.Item>
        <Tabbar.Item name="/my">我的</Tabbar.Item>
      </Tabbar>
    </div>
  );
}

export default App;
